<!-- 公客列表 -->
<div style="width: 100%;height: 50px;background-color: white;margin: 15px 20px 0px 20px;padding: 10px 30px;border-bottom-width: 3px;border-bottom-style: solid;border-bottom-color: red">
    <i class="glyphicon glyphicon-th-list"></i>&nbsp;&nbsp;公客列表
</div>
<div  style="width: 100% ;height: 240px;background-color: white;margin: 0px 20px 15px 20px ;padding: 10px 50px;">
    <div style="width: 100%;height:60px">
        客户 &nbsp;<input type="text" placeholder="客户名称" >
        <input type="text" placeholder="客户编号" >
        <select style="margin-right: 10%;height: 45%">
            <option>请选择</option>
        </select>
        联系方式
        <select style="height: 45%">
            <option>手机</option>
            <option>固话</option>
        </select>
        <input type="text" placeholder="固话/手机" style="margin-right: 10%">
        交易
        <select style="height: 45%">
            <option>请选择</option>
            <option></option>
        </select>
    </div>
    <div style="width: 100%;height:60px">
        来源 &nbsp;
        <select style="margin-right: 6%;height: 45%;width: 15%">
            <option>请选择</option>
            <option></option>
        </select>

        渠道 &nbsp;
        <select style="margin-right: 10%;height: 45%;width: 12%">
            <option>请选择</option>
            <option></option>
        </select>

        跳公日期 &nbsp;&nbsp;<input type="text" placeholder="开始 至 结束" style="margin-right: 10%">
        价格 <input type="text" style="width: 5%" placeholder="万或元">-<input type="text" style="width: 5%" placeholder="万或元">
    </div>
    <div style="width: 100%;height:60px">
        区域 &nbsp;
        <select style="height: 45%;width: 12%">
            <option>请选择</option>
            <option></option>
        </select>
        <select style="height: 45%;width: 12%">
            <option>请选择</option>
            <option></option>
        </select>
        <select style="height: 45%;width: 18%">
            <option>请选择城区</option>
            <option></option>
        </select>
        <select style="height: 45%;width: 18%;margin-right: 17%">
            <option>请选择片区</option>
            <option></option>
        </select>
        户型 &nbsp;&nbsp;
        <input type="text" style="width: 5%" placeholder="室">-<input type="text" style="width: 5%" placeholder="室">
    </div>
    <div style="width: 100%;height:60px;text-align: right;padding-right: 5%">
        <button type="button" class="btn btn-danger"><i class="glyphicon glyphicon-search"></i>&nbsp;搜索</button>
        <button type="button" class="btn btn-default"><i class="glyphicon glyphicon-trash"></i>&nbsp;清空</button>
    </div>
</div>

<!--标签页 -->
<script>
    $('#myTabs a').click(function (e) {
        e.preventDefault()
        $(this).tab('show')
    })
    $('#myTabs a[href="#profile"]').tab('show') // Select tab by name
    $('#myTabs a:first').tab('show') // Select first tab
    $('#myTabs a:last').tab('show') // Select last tab
    $('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)
</script>

<div style="width: 100% ;margin: 15px 20px">

    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist" style="background-color: lightgrey">
        <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">片区公客池</a></li>
        <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">小战区公客池</a></li>
        <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">战区公客池</a></li>
    </ul>

    <div style="margin: 5px 0px 15px 0px;background-color: white;height: 40px">
        <div style="float: right;padding: 5px 20px 0px 0px;margin-left: 20px;" >
            <ul class="pagination pagination-sm no-margin pull-right">
                <li><a class="pre"> <i class="glyphicon glyphicon-chevron-left"></i> </a></li>
                <li><a class="next"> <i class="glyphicon glyphicon-chevron-right"></i> </a></li>
            </ul>
        </div>
        <div style="float: right ;padding-top:5px ">
            <div class="btn-group" role="group" aria-label="...">
                <button type="button" class="btn btn-default" style="color: white ;background-color: #8e908c">10</button>
                <button type="button" class="btn btn-default" style="color: white;background-color: #8e908c">20</button>
                <button type="button" class="btn btn-default" style="color: white;background-color: #8e908c">30</button>
            </div>
        </div>
        <div style="float: left ;padding: 15px 0px 0px 30px">
            <a style="margin-right: 15px;color: black">活跃时间 <i class="glyphicon glyphicon-chevron-down"></i></a>
            <a style="margin-right: 15px;color: black">委托日期</a>
            <a style="margin-right: 15px;color: black">跟进数量</a>
            <a style="margin-right: 15px;color: black">跟进时间</a>
            <a style="margin-right: 15px;color: black">跳公日期</a>
        </div>
    </div>

    <div style="padding: 15px 5px;width: 100% ;height: 50px;background-color: red;color:white;">
        <div style="width: 8% ;text-align: center ;float: left">客户</div>
        <div style="width: 10% ;text-align: center;float: left">户型</div>
        <div style="width: 5% ;text-align: center;float: left">面积</div>
        <div style="width: 8% ;text-align: center;float: left">价格</div>
        <div style="width: 8% ;text-align: center;float: left">来源</div>
        <div style="width: 15% ;text-align: center;float: left">跳公日期</div>
        <div style="width: 15% ;text-align: center;float: left">创建时间</div>
        <div style="width: 15% ;text-align: center;float: left">最后跟进</div>
        <div style="width: 8% ;text-align: center;float: left">原归属人</div>
        <div style="width: 8% ;text-align: center;float: left">创建人</div>
    </div>

    <!-- Tab panes -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="home">
            <div style="width: 100%;height: 140px;background-color: white;border-color: lightgrey;border-style: solid;border-width: 1px">
                <div style="height: 70px;padding-top: 20px">
                    <div style="width: 8% ;text-align: center ;float: left">徐先生</div>
                    <div style="width: 10% ;text-align: center;float: left">1-1室</div>
                    <div style="width: 5% ;text-align: center;float: left">30-40</div>
                    <div style="width: 8% ;text-align: center;float: left">220-250万</div>
                    <div style="width: 8% ;text-align: center;float: left">网络</div>
                    <div style="width: 15% ;text-align: center;float: left">2020/09/11</div>
                    <div style="width: 15% ;text-align: center;float: left">2020/09/06</div>
                    <div style="width: 15% ;text-align: center;float: left">2020/09/11</div>
                    <div style="width: 8% ;text-align: center;float: left">杨辉</div>
                    <div style="width: 8% ;text-align: center;float: left">李丹</div>
                </div>

                <div style="height: 70px">
                    <div style="float: left;margin-left: 20px">
                        <a href="#" class="glyphicon glyphicon-earphone" style="margin-right: 5px;background-color: red;color: white;height: 20px ;width: 20px;padding: 3px 3px" ></a>
                        <a href="#" class="glyphicon glyphicon-tags" style="margin-right: 5px;background-color: red;color: white;height: 20px ;width: 20px;padding: 3px 3px" ></a>
                        <a href="#" style="border-style: solid;border-color: #0b97c4;color: #0b97c4;border-width: 1px">
                            <i class="glyphicon glyphicon-pencil"></i>&nbsp;领用
                        </a>
                    </div>

                    <div style="float: right;width: 15%">
                        客源编号 : hskz65465465
                    </div>
                    <div style="float: right;width: 15%">
                        虹口区 四平路片
                    </div>
                </div>

            </div>

            <div style="width: 100%;height: 140px;background-color: white;border-color: lightgrey;border-style: solid;border-width: 1px">
                <div style="height: 70px;padding-top: 20px">
                    <div style="width: 8% ;text-align: center ;float: left">徐先生</div>
                    <div style="width: 10% ;text-align: center;float: left">1-1室</div>
                    <div style="width: 5% ;text-align: center;float: left">30-40</div>
                    <div style="width: 8% ;text-align: center;float: left">220-250万</div>
                    <div style="width: 8% ;text-align: center;float: left">网络</div>
                    <div style="width: 15% ;text-align: center;float: left">2020/09/11</div>
                    <div style="width: 15% ;text-align: center;float: left">2020/09/06</div>
                    <div style="width: 15% ;text-align: center;float: left">2020/09/11</div>
                    <div style="width: 8% ;text-align: center;float: left">杨辉</div>
                    <div style="width: 8% ;text-align: center;float: left">李丹</div>
                </div>

                <div style="height: 70px">
                    <div style="float: left;margin-left: 20px">
                        <a href="#" class="glyphicon glyphicon-earphone" style="margin-right: 5px;background-color: red;color: white;height: 20px ;width: 20px;padding: 3px 3px" ></a>
                        <a href="#" class="glyphicon glyphicon-tags" style="margin-right: 5px;background-color: red;color: white;height: 20px ;width: 20px;padding: 3px 3px" ></a>
                        <a href="#" style="border-style: solid;border-color: #0b97c4;color: #0b97c4;border-width: 1px">
                            <i class="glyphicon glyphicon-pencil"></i>&nbsp;领用
                        </a>
                    </div>

                    <div style="float: right;width: 15%">
                        客源编号 : hskz65465465
                    </div>
                    <div style="float: right;width: 15%">
                        虹口区 四平路片
                    </div>
                </div>

            </div>

            <div style="width: 100%;height: 140px;background-color: white;border-color: lightgrey;border-style: solid;border-width: 1px">
                <div style="height: 70px;padding-top: 20px">
                    <div style="width: 8% ;text-align: center ;float: left">徐先生</div>
                    <div style="width: 10% ;text-align: center;float: left">1-1室</div>
                    <div style="width: 5% ;text-align: center;float: left">30-40</div>
                    <div style="width: 8% ;text-align: center;float: left">220-250万</div>
                    <div style="width: 8% ;text-align: center;float: left">网络</div>
                    <div style="width: 15% ;text-align: center;float: left">2020/09/11</div>
                    <div style="width: 15% ;text-align: center;float: left">2020/09/06</div>
                    <div style="width: 15% ;text-align: center;float: left">2020/09/11</div>
                    <div style="width: 8% ;text-align: center;float: left">杨辉</div>
                    <div style="width: 8% ;text-align: center;float: left">李丹</div>
                </div>

                <div style="height: 70px">
                    <div style="float: left;margin-left: 20px">
                        <a href="#" class="glyphicon glyphicon-earphone" style="margin-right: 5px;background-color: red;color: white;height: 20px ;width: 20px;padding: 3px 3px" ></a>
                        <a href="#" class="glyphicon glyphicon-tags" style="margin-right: 5px;background-color: red;color: white;height: 20px ;width: 20px;padding: 3px 3px" ></a>
                        <a href="#" style="border-style: solid;border-color: #0b97c4;color: #0b97c4;border-width: 1px">
                            <i class="glyphicon glyphicon-pencil"></i>&nbsp;领用
                        </a>
                    </div>

                    <div style="float: right;width: 15%">
                        客源编号 : hskz65465465
                    </div>
                    <div style="float: right;width: 15%">
                        虹口区 四平路片
                    </div>
                </div>

            </div>

            <div style="width: 100%;height: 140px;background-color: white;border-color: lightgrey;border-style: solid;border-width: 1px">
                <div style="height: 70px;padding-top: 20px">
                    <div style="width: 8% ;text-align: center ;float: left">徐先生</div>
                    <div style="width: 10% ;text-align: center;float: left">1-1室</div>
                    <div style="width: 5% ;text-align: center;float: left">30-40</div>
                    <div style="width: 8% ;text-align: center;float: left">220-250万</div>
                    <div style="width: 8% ;text-align: center;float: left">网络</div>
                    <div style="width: 15% ;text-align: center;float: left">2020/09/11</div>
                    <div style="width: 15% ;text-align: center;float: left">2020/09/06</div>
                    <div style="width: 15% ;text-align: center;float: left">2020/09/11</div>
                    <div style="width: 8% ;text-align: center;float: left">杨辉</div>
                    <div style="width: 8% ;text-align: center;float: left">李丹</div>
                </div>

                <div style="height: 70px">
                    <div style="float: left;margin-left: 20px">
                        <a href="#" class="glyphicon glyphicon-earphone" style="margin-right: 5px;background-color: red;color: white;height: 20px ;width: 20px;padding: 3px 3px" ></a>
                        <a href="#" class="glyphicon glyphicon-tags" style="margin-right: 5px;background-color: red;color: white;height: 20px ;width: 20px;padding: 3px 3px" ></a>
                        <a href="#" style="border-style: solid;border-color: #0b97c4;color: #0b97c4;border-width: 1px">
                            <i class="glyphicon glyphicon-pencil"></i>&nbsp;领用
                        </a>
                    </div>

                    <div style="float: right;width: 15%">
                        客源编号 : hskz65465465
                    </div>
                    <div style="float: right;width: 15%">
                        虹口区 四平路片
                    </div>
                </div>

            </div>

        </div>

        <div role="tabpanel" class="tab-pane" id="profile">2</div>
        <div role="tabpanel" class="tab-pane" id="messages">3</div>
    </div>

</div>
